<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="user">
        <img src="../assets/avator.jpg" alt="user name">
        <h2>Jane Doe</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed ante fringilla, rutrum turpis nec,
            sagittis massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque metus dui, cursus eu
            hendrerit eget, cursus sed tellus. Mauris congue vestibulum tristique. </p>
    </div>
</body>

<style>
    .user {
        --w: 450px;
        --c: (100vw - var(--w));

        max-width: 500px;
        background: #fff;
        margin: 10px auto;
        border-radius: 10px;
        overflow: hidden;
        padding: 0 20px 0 clamp(20px, var(--c)*1000, 180px);
        box-sizing: border-box;
        box-shadow: 1px 2px 5px #0005;
        position: relative;
    }

    .user img {
        position: absolute;
        top: clamp(0px, var(--c)*-1000, 10px);
        left: clamp(0px, var(--c)*-1000, 20px);
        width: clamp(50px, var(--c)*1000, 150px);
        height: clamp(50px, var(--c)*1000, 100%);
        border-radius: clamp(0px, var(--c)*-1000, 50px);
        object-fit: cover;
        object-position: top;
    }

    .user h2 {
        margin: 20px 0 10px clamp(0px, var(--c)*-1000, 70px);
    }

    body {
        background: pink;
    }
</style>

</html>